<template>
  <div class="app-container">
    <el-card header="基本信息">
      <ele-form
        id="form1"
        ref="baseDataForm"
        v-model="formData"
        label-position="left"
        label-width="160"
        :is-show-submit-btn="false"
        :is-show-back-btn="false"
        :form-attrs="{ 'inline-message': true }"
        :form-desc="formDesc"
        :span="24"
        :before-request="beforeRequestBaseDataForm"
      />
    </el-card>

    <author  ref="author"  @getAuthorData="getAuthorData" />

    <Authorteacher  ref="authorteacher"  @getAuthorData="getAuthorData1" />

    <el-card header="附件信息" style="margin-top: 20px;">
      <ele-form
        id="form2"
        v-model="mediaFormData"
        label-position="left"
        label-width="140"
        :is-show-submit-btn="false"
        :is-show-back-btn="false"
        :form-attrs="{ 'inline-message': true }"
        :form-desc="mediaFormDesc"
        :span="24"
      >
        <el-form-item label="获奖佐证" label-position="left" required>
          <el-upload
            ref="upload"
            action=""
            :limit="1"
            list-type="picture-card"
            accept=".png,.jpg,.jpeg"
            :auto-upload="false"
            :on-preview="handlePictureCardPreview"
            :file-list="fileList"
            :before-upload="beforeUpload"
            :http-request="uploadFile"
            :on-remove="handleRemoveFile"
          >
            <i class="el-icon-plus"></i>

            <div v-if="!hideupload" slot="tip" class="el-upload__tip">
              只能上传png,jpg,jpeg格式图片，且不超过10M
            </div>
          </el-upload>
        </el-form-item>
      </ele-form>
    </el-card>

    <el-image-viewer
      :urlList="fileListView"
      v-if="dialogVisible"
      :initial-index="0"
      :on-close="
        () => {
          dialogVisible = false;
        }
      "
    ></el-image-viewer>

    <el-card header="备注信息" style="margin-top: 20px;">
      <ele-form
        ref="remarkForm"
        v-model="remarkFormData"
        label-position="left"
        label-width="140"
        :is-show-submit-btn="true"
        :is-show-back-btn="false"
        :form-attrs="{ 'inline-message': true }"
        :form-desc="remarkFormDesc"
        :span="24"
        :request-fn="handleRequestRemarkForm"
        :before-request="beforeRequestRemarkForm"
        @requset="createData"
      />
    </el-card>

  </div>
</template>

<script src="./index.js"></script>

<style>
body {
  background-color: #efefef;
}

.el-card__header {
  background-color: aliceblue;
  font-size: 20px;
}

#form1 form .el-row {
  background: rgb(231, 229, 229);
}

#form1 .el-form-item {
  margin-bottom: 0px;
}
#form1 .el-col-md-12 {
  border-left: 1px solid rgb(168, 203, 234);
  border-right: 1px solid rgb(168, 203, 234);
  border-bottom: 1px solid rgb(168, 203, 234);
  padding-right: 0px !important;
}
#form1 .el-col-md-24 {
  border-left: 1px solid rgb(168, 203, 234);
  border-right: 1px solid rgb(168, 203, 234);
  border-bottom: 1px solid rgb(168, 203, 234);
  padding-right: 0px !important;
}
#form1 .first-node {
  border-top: 1px solid rgb(168, 203, 234);
}

.around-border {
  border-top: 1px solid rgb(168, 203, 234);
  border-left: 1px solid rgb(168, 203, 234);
  border-right: 1px solid rgb(168, 203, 234);
  padding-right: 0px !important;
}

.last-node {
  border-top: 1px solid rgb(168, 203, 234);
  border-left: 1px solid rgb(168, 203, 234);
  border-right: 1px solid rgb(168, 203, 234);
  border-bottom: 1px solid rgb(168, 203, 234);
  padding-right: 0px !important;
}

#form1 .el-form-item__content {
  border-left: 1px solid rgb(168, 203, 234);
  padding-left: 10px;
  padding-bottom: 5px;
  padding-top: 5px;
  background: white;
}
#form1 .el-form-item__label {
  padding-top: 5px;
}

.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}
.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
</style>
